<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>查询找人找车</title>
  <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/dpl.css" rel="stylesheet">
  <link href="http://g.alicdn.com/bui/bui/1.1.21/css/bs3/bui.css" rel="stylesheet">

</head>
<body>

<!-- 搜索页 ================================================== -->
    <div class="row">
      <div class="span24">        
    
	     <div class="panel panel-success">
	          <div class="panel-header clearfix">
	            <h3 class="pull-left">查询找人找车</h3>
	          </div>
	          <div class="panel-body">
	     
	        
        <form id="searchForm" class="form-horizontal" tabindex="0" style="outline: none;">
        	
        	<div class="row">
        	<div class="tips tips-small span8">
			        <span class="x-icon x-icon-small x-icon-warning"><i class="icon icon-white icon-question"></i></span>
			        <div class="tips-content">如何快速搜索?填写:出发城市+(到/去/回)+目的地城市:如：南京去宿迁,南京回宿迁,南京到宿迁,南京。任意一种即可</div>
			    </div>
        	</div>
        		
          <div class="row">
            <div class="control-group">
               <label class="control-label">搜索:</label>
              <div class="controls ">
                <input type="text" name="address" class="control-text ">
              </div>
               
            </div>
            <div class="control-group ">
              <label class="control-label">人数:</label>
              <div class="controls">
                <input type="text" name="sizePerson" class="control-text " value="1">
              </div>
            </div>
            <div class="control-group ">
              <label class="control-label">类型:</label>
              <div class="controls ">
                  <select class="input-small " name="type"><option value="0">找人</option><option value="1">找车</option></select>
              </div>
            </div>
         
          </div>
          <div class="row">
            <div class="control-group">
              <label class="control-label">出发时间:</label>
              <div class="controls bui-form-group" data-rules="{dateRange : true}">
                <input name="faTime" data-tip="{text : '出发时间'}" data-rules="{required:true}" data-messages="{required:'出发时间不能为空'}" class="input-large calendar calendar-time" type="text">    
              </div>
            </div>
          </div>
          <div class="row">
            <div class="control-group span10">
              <label class="control-label">&nbsp;</label>
              <div class="controls">
                <button id="btnSearch" type="submit" class="button button button-danger"><i class="icon-white icon-search"></i>&nbsp;搜索</button>
              </div>
            </div>
          </div>
        </form>
	          </div>
	        </div>
	        
	            
     <div class="panel panel-info">
          <div class="panel-header clearfix">
            <h3 class="pull-left">搜索结果</h3>
          </div>
          <div class="panel-body">
			      <div id="grid">
          </div>
        </div>
      </div>
    </div> 

        
 
    <script src="http://g.tbcdn.cn/fi/bui/jquery-1.8.1.min.js"></script>
    <script src="http://g.tbcdn.cn/fi/bui/bui-min.js?t=201309041336"></script> 
    <script type="text/javascript">
        var Grid = BUI.Grid,
          Store = BUI.Data.Store,
          columns = [
            { title: '类型/人数',width: 50,  sortable: false, dataIndex: 'type'},
            { title: '出发', width: 40, sortable: true, dataIndex: 'startAddress'},
            { title: '目的', width: 40, sortable: false, dataIndex: 'endAddress'},
            { title: '出发时间',width: 120, sortable: true,  dataIndex: 'faTime'},
            { title: '联系电话', width: 60,sortable: true,  dataIndex: 'phone'},
            { title: '备注',width: 100, sortable: true,  dataIndex: 'contentBZ'},
            { title: '发布时间',width: 50, sortable: true,  dataIndex: 'createTime'}
          ];
 
        var store = new Store({
            url : '../car/searchCar',
            autoLoad:true,
            pageSize:10
          }),
          grid = new Grid.Grid({
            render:'#grid',
            loadMask: true,
            forceFit:true,
            columns : columns,
            store: store,
            // 顶部工具栏
            bbar : {
              pagingBar:true
            }
          });
 
        grid.render();
 
        //创建表单，表单中的日历，不需要单独初始化
        var form = new BUI.Form.HForm({
          srcNode : '#searchForm'
        }).render();
 
        form.on('beforesubmit',function(ev) {
          //序列化成对象
          var obj = form.serializeToObject();
          obj.start = 0; //返回第一页
          store.load(obj);
          return false;
        });
    </script>
<!-- script end -->
</body>
</html>